<template>
  <div>
<h2>房号显示</h2>
<table border="1">
  <tr>
    <th>房号</th>
    <th>昵称</th>
    <th>价格</th>
    <th>面积</th>
    <th>地址</th> 
    <th>入住时间</th>
    <td>操作</td>
    <th>操作</th>
  </tr>
  <tr v-for="item in list">
    <td>{{ item.num }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
    <td>{{ item.size }}</td>
    <td>{{ item.address }}</td>
    <td>{{ item.sdate }}</td>
    <td>{{ item.states==1?"空房":"满房" }}</td>
    <td>
      <input type="button" @click="jump(item.id)" value="修改">
      <input type="button" @click="zhuangtai(item.id,item.states)" value="状态">
    </td>
  </tr>
</table>
  </div>
  共有6条
  每页显示2 条
  当前为第1/3页
  <input type="button" value="首页">

  <input type="button" value="上一页">
  <input type="button" value="下一页">
  <input type="button" value="尾页">
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter();
let data:any=reactive({
  state:{

  },
  list:[]
})
let{state,list}=toRefs(data)
onMounted(()=>{
  show()
})
function show()
{
 axios({
  url:'/api/Room/GetRooms',
  method:'get'
 })
 .then(res=>{
  list.value=res.data.data
 })
 .catch(err=>{

 })
}
//修改状态
const zhuangtai=(id:any,states:any)=>{
  if(states==1)
  {
     states =0;
  }
  else
  {
    states =1;
  }
  let obj={
    id:id,
   state: states
  }
  axios({
      url:'/api/Room/Zhuangtai',
      method:'get',
      params:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert("状态修改成功")
  }
  })
  .catch(err=>{

  })
}
function jump(id:any)
{
  router.push({
   path:'update',
   query:{id:id}
  })
}
</script>

<style scoped>

</style>